<!--
这个文件定义了一个名为 `MainPage` 的 Vue 组件，用于显示应用的主页面布局。
组件包含以下部分：
- template: 使用 `el-container` 组件构建页面布局，包含以下内容：
  - `el-aside`: 包含侧边栏组件 `Aside`。
  - `el-container`（带有 `full-height` 类）: 包含头部和主要内容区域。
    - `el-header`: 包含头部组件 `Header`。
    - `el-main`: 使用 `router-view` 渲染当前路由对应的组件。
- script setup: 使用 Vue 3 的 `<script setup>` 语法，导入并注册 `Header` 和 `Aside` 组件。
- style scoped: 定义了两个样式类 `#mainContainer` 和 `full-height`，用于设置容器的高度。
-->

<template>
    <el-container id="mainContainer">
        <el-aside>
            <Aside />
        </el-aside>
        <el-container class="full-height">
            <el-header id="mainHeader">
                <Header />
            </el-header>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import Header from '@/components/main-page/common/Header.vue'
import Aside from '@/components/main-page/common/Aside.vue'
</script>

<style scoped>
#mainContainer {
    height: 100vh;
}

.full-height {
    height: 100%;
}
</style>